<template>
  <div class="add_exhibits">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="预热展品信息" name="first">
        <preheatExhibitsInformation></preheatExhibitsInformation>
      </el-tab-pane>
      <el-tab-pane label="产品概要" name="second">
        <productSummary></productSummary>
      </el-tab-pane>
      <el-tab-pane label="加工视频" name="third">
        <processingVideo></processingVideo>
      </el-tab-pane>
      <el-tab-pane label="典型样件" name="fourth">
        <processingSample></processingSample>
      </el-tab-pane>
      <el-tab-pane label="成线情况" name="five">
        <alignment></alignment>
      </el-tab-pane>
      <el-tab-pane label="远程连接" name="sex">
        <remoteConnection></remoteConnection>
      </el-tab-pane>
      <el-tab-pane label="发展史" name="seven">
        <historyOfDevelopment></historyOfDevelopment>
      </el-tab-pane>
      <el-tab-pane label="样本下载" name="eight">
        <sampleDownload></sampleDownload>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import preheatExhibitsInformation from "./preheatExhibitsInformation";
import productSummary from "./productSummary";
import processingVideo from "./processingVideo";
import processingSample from "./processingSample";
import alignment from "./alignment";
import remoteConnection from "./remoteConnection";
import historyOfDevelopment from "./historyOfDevelopment";
import sampleDownload from "./sampleDownload";
export default {
  name: "",
  components: {
    preheatExhibitsInformation,
    productSummary,
    processingVideo,
    processingSample,
    alignment,
    remoteConnection,
    historyOfDevelopment,
    sampleDownload,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang='less' scoped>
.add_exhibits {
  padding-left: 30px;
  font-size: 18px;
  padding-top: 27px;
  color: #333333;
}
/deep/ .el-tabs,
.el-tabs--top {
  width: 1580px;
  .el-tabs__header {
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding-left: 50px;
    box-sizing: border-box;
    .el-tabs__nav-wrap {
      height: 60px;
      .el-tabs__nav-scroll {
        .el-tabs__nav {
          height: 60px;
          line-height: 60px;
        }
      }
    }
  }
}
/deep/ .el-tabs__item {
  // padding: 0 20px;
  height: 60px;
  line-height: 60px;
  font-size: 0.18rem;
  color: #333333;
}
/deep/ .el-tabs__item.is-active {
  color: #004cb3;
  font-weight: bold;
}
/deep/ .el-tabs__item:hover {
  color: #004cb3;
  font-weight: bold;
}
/deep/ .el-tabs__nav-wrap::after {
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
/deep/ .el-tabs__content {
  margin-top: 30px;
  background-color: #fff;
}
/deep/ .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #004cb3;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
}
</style>